<template>
  <div class="categories__wrapper">
    <div class="row g-4">
      <div class="col-lg-4" data-aos="fade-right" data-aos-duration="800">
        <div class="section-header pe-3">
          <h2>
            探                     索 <br />
            我们能快速获取的资源
          </h2>
          <p>
            Look into yourself, get something in return as your AchievementLook
            into yourself, get something Return as your achievement
          </p>
          <nuxt-link
            to="/courses"
            class="trk-btn trk-btn--rounded trk-btn--secondary1"
            >探索类别</nuxt-link
          >
        </div>
      </div>
      <div class="col-lg-8">
        <div class="row g-4" data-aos="fade-left" data-aos-duration="800">
          <div
            v-for="(item, index) in categoryListOne"
            :key="index"
            class="col-lg-3 col-md-3 col-sm-3 col-4"
          >
            <div class="categories__item">
              <div class="categories__item-inner">
                <div
                  class="categories__thumb"
                  :class="`categories__thumb--cat${index % 3 || 3}`"
                >
                  <img :src="item.icon" alt="course icon" />
                </div>

                <div class="categories__item-content">
                  <nuxt-link
                    to="/course-category"
                    class="stretched-link active"
                    >{{ item.title }}</nuxt-link
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    categoryListOne: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style></style>
